<!--这不是一个封装好的表格组件 仅仅是应为目录编制文件内容太多了 翻页找代码太麻烦 所以写在这个文件下-->
<template>
  <div class="table-wrapper">
    <div class="head">
      <div class="cell" v-for="(col, index) in columns" :key="col + index">
        {{ col.alias }}
      </div>
    </div>
    <div class="body">
      <div class="t-row" v-for="row in dataSource" :key="row.key">
        <div
                class="t-cell"
                v-for="(col, index) in columns"
                :key="col.name + index"
        >
          {{ row[col.name] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "uz-table",
        props: {
            dataSource: {
                type: Array,
                default: () => [ ],
            },

            columns: {
                type: Array,
                default: () => [
                    {
                        name: "org_name",
                        alias: "部门",
                    }, {
                        name: "sl",
                        alias: "数量",
                    }]
            },
        },
    };
</script>

<style lang="less" scoped>
  .table-wrapper {
    width: 100%;
    height: 100%;
    padding: 10px 10px 20px;
    .head {
      display: grid;
      height: 36px;
      background: #f3f5f9;
      border: 1px solid #f0f0f0;
      border-radius: 3px;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      .cell {
        &:first-child {
          width: 200px;
        }
      }
    }
    .body {
      width: 100%;
      max-height: 300px;
      min-height: 300px;
      overflow: auto;
      box-shadow: 0 0 2px #ccc;
      .t-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: 30px;
        align-items: center;
        &:nth-child(2n) {
          background: #f7fbff;
          border-top: 1px solid #dfe9ed;
          border-bottom: 1px solid #dfe9ed;
        }
        .t-cell {
          font-size: 14px;
          &:first-child {
            text-align: left;
            padding-left: 4px;
            width: 200px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }
    }
  }
</style>
